import { h, ref, reactive } from 'vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import TableImage from '@/components/DataTable/tools/Image.vue'
// import { useUserStore } from '@/store/modules/user'

// const roleType = ref(null)
// setTimeout(() => {
//   roleType.value = useUserStore().userInfo.type
// })

/* 注册table */
const tableRef = ref()
const searchParams = ref()

function handleSearch(params) {
  searchParams.value = { ...params }
  tableRef.value.reFetch({ searchParams })
}

/**
 * @description: 详情
 * @param {*} row 单行数据
 * @param {*} type 操作类型 create:创建，preview:预览，edit:编辑
 * @return {*}
 */
async function getRowData(row, type) {
  data.rowData = row
  data.modalType = type
  data.modalShow = true
}

// 图片位置
function imgAddress(row) {
  data.showDraw = true
  data.rowData = row
}

const data = reactive({
  tableRef,
  searchParams,
  rowData: {},
  modalType: 'create',
  modalShow: false,
  showDraw: false,
  disposeBtn: false,
  detail: {},
  handleSearch,
  columns: [
    {
      title: '序号',
      key: 'key',
      render: (_, index) => {
        return `${index + 1}`
      },
      align: 'center',
      width: 100
    },
    {
      title: '任务编码',
      key: 'inspectionCode',
      align: 'center'
    },
    {
      title: '问题类型',
      key: 'questionName',
      align: 'center'
    },
    {
      title: '问题图片',
      key: 'fileImage',
      align: 'center',
      render(row) {
        // row.fileOriginal = 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg'
        return h(TableImage, {
          images: {
            width: 119,
            height: 51,
            // src: row.fileOriginal.split(',')[0],
            src: row.fileImage,
            // previewDisabled: true, // 禁止点击预览
            // onClick: showUpload.bind(null, row),
            style: {
              cursor: 'pointer'
            }
          }
        })
      }
    },
    // {
    //   title: '经纬度',
    //   key: 'lnglat',
    //   align: 'center'
    // },
    {
      title: '位置',
      align: 'center',
      width: 80,
      fixed: 'right',
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '图片位置',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: imgAddress.bind(null, row, 'preview')
              },
              auth: ''
            }
          ],
          align: 'center'
        })
      }
    },
    {
      title: '问题状态',
      key: 'statusName',
      align: 'center'
    },
    {
      title: '处理时间',
      key: 'handlerTime',
      align: 'center'
    },
    {
      title: '处理人员',
      key: 'handlerUsername',
      align: 'center'
    },
    {
      title: '处理后图片',
      key: 'imageUrl',
      align: 'center',
      render(row) {
        // row.imageUrl = 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg'
        if (row.handlerImages !== '' && row.handlerImages !== null) {
          return h(TableImage, {
            images: {
              width: 119,
              height: 51,
              src: row.handlerImages.split(',')[0],
              // previewDisabled: true, // 禁止点击预览
              style: {
                cursor: 'pointer'
              }
            }
          })
        } else {
          return h(TableAction, {
            actions: [
              {
                label: '',
                type: 'button',
                props: {
                  type: 'primary',
                  text: true
                },
                auth: 'basic_list'
              }
            ],
            align: 'center'
          })
        }
      }
    },
    {
      title: '处理结果',
      key: 'handlerResult',
      align: 'center'
    },
    {
      title: '操作',
      align: 'center',
      key: 'actionBtn',
      fixed: 'right',
      disabled: false,
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '处理',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: getRowData.bind(null, row, 'create'),
                style: {
                  display: data.disposeBtn && row.status !== 25 ? '' : 'none'
                }
              },
              auth: ''
            },
            {
              label: '详情',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: getRowData.bind(null, row, 'preview'),
                style: {
                  display: row.status === 25 ? '' : 'none'
                }
              },
              auth: ''
            }
          ],
          align: 'center'
        })
      }
    }
  ]
})

export default data
